var EmployeeSelectGrid = {

		gridElement : null,
		paginationElement : null,
		doubleClickHandler : null,
		displayVisitors : false,
		
		fieldsMappings : {
			empId 			: {name : "empId", 			displayName : "empId", 			inputMapping: null, visible: false, width : 50 },
			empNameEn 		: {name : "empNameEn", 		displayName : "empNameEn", 		inputMapping: null, visible: false, width : 50 },
			empNameAr 		: {name : "empNameAr",		displayName : "empNameAr",		inputMapping: null, visible: false, width : 50 },
			empStatus		: {name : "empStatus", 		displayName : "empStatus", 		inputMapping: null, visible: false, width : 50 },
			empPermitNo		: {name : "empPermitNo", 	displayName : "empPermitNo",	inputMapping: null, visible: false, width : 50 },
			empIssueDate	: {name : "empIssueDate", 	displayName : "empIssueDate", 	inputMapping: null, visible: false, width : 50 },
			empExpDate		: {name : "empExpDate", 	displayName : "empExpDate", 	inputMapping: null, visible: false, width : 50 },
			empPostNo 		: {name : "empPostNo", 		displayName : "empPostNo", 		inputMapping: null, visible: false, width : 50 },
			empNationality	: {name : "empNationality", displayName : "empNationality", inputMapping: null, visible: false, width : 50 },
			empCECNo		: {name : "empCECNo", 		displayName : "empCECNo", 		inputMapping: null, visible: false, width : 50 }
		},
		
		init : function(gridElement, paginationElement, doubleClickHandler) {
			this.gridElement = gridElement;
			this.paginationElement = paginationElement;
			this.doubleClickHandler = doubleClickHandler;
		},
		
		defineFieldMapping : function(field, displayName, inputMapping, visible) {
			this.fieldsMappings[field]["displayName"] = displayName;
			this.fieldsMappings[field]["inputMapping"] = inputMapping;
			this.fieldsMappings[field]["visible"] = !!visible;
		},
		
		handleDoubleClick : function(rowId){
			var rowData = $('#'+EmployeeSelectGrid.gridElement).getRowData(rowId);
			var lcColNames = new Array();
			for (ind in EmployeeSelectGrid.fieldsMappings)
			{
				var inputMapping = EmployeeSelectGrid.fieldsMappings[ind]["inputMapping"];
				if(inputMapping!=null){
					var inputName = EmployeeSelectGrid.fieldsMappings[ind]["name"];
					$("#"+inputMapping).val(rowData[inputName]);
				}
			}
			EmployeeSelectGrid.doubleClickHandler();
		},
		
		drawGrid : function() {
		
			var lcColNames = new Array();
			for (ind in this.fieldsMappings)
			{
				lcColNames.push(this.fieldsMappings[ind]["displayName"]);
			}
			var lcColModel = new Array();
			for (ind in this.fieldsMappings)
			{
				
				lcColModel.push({	name : this.fieldsMappings[ind]["name"], 
									index : this.fieldsMappings[ind]["name"],  
									width : this.fieldsMappings[ind]["width"],
									sortable : false,
									hidden : !this.fieldsMappings[ind]["visible"]
								});
			}
			
			var gridDataUrl = 'showEmployes.json';
			if(this.displayVisitors){
				gridDataUrl+='?isVisitorsRequest=true';
			}
			
			$('#'+this.gridElement).jqGrid({
												datatype :'json',
												url		 : gridDataUrl,
												colNames : lcColNames,
												colModel : lcColModel,
												height:300,
												rowNum: lcColModel.length,
												autowidth: true, 
												viewrecords: true,
												rowList:[10,20,30], 
												pager: jQuery('#'+this.paginationElement), 
												//sortname: 'empId', 
												viewrecords: true, 
												//sortorder: "asc",
												ondblClickRow: function(rowId){ 
													EmployeeSelectGrid.handleDoubleClick(rowId);
												}
											});
		}
}

var EmployeeAutoFiller = {
		
		employeeIdInputFieldId : null,
		isVisitor : false,
		
		fieldsMappings : {
			empId 			: {name : "employeeId",		inputMapping: null},
			empNameEn 		: {name : "empNameEn", 		inputMapping: null},
			empNameAr 		: {name : "empNameAr",		inputMapping: null},
			empStatus		: {name : "employeeStatus",	inputMapping: null},
			empPermitNo		: {name : "permitNo",	 	inputMapping: null},
			empIssueDate	: {name : "issueDate",	 	inputMapping: null},
			empExpDate		: {name : "expDate",	 	inputMapping: null},
			empPostNo 		: {name : "postNo", 		inputMapping: null},
			empNationality	: {name : "nationality", 	inputMapping: null},
			empCECNo		: {name : "cecNo",	 		inputMapping: null}
		},
		
		init : function(employeeIdInputFieldId){
			this.employeeIdInputFieldId = employeeIdInputFieldId;
		},
		
		defineFieldMapping : function(field, inputMapping) {
			this.fieldsMappings[field]["inputMapping"] = inputMapping;
		},
		
		completeFields : function(jsonData) {
			for (ind in EmployeeAutoFiller.fieldsMappings)
			{
				var inputMapping = EmployeeAutoFiller.fieldsMappings[ind]["inputMapping"];
				if(inputMapping!=null){
					var inputName = EmployeeAutoFiller.fieldsMappings[ind]["name"];
					$("#"+inputMapping).val(jsonData[inputName]);
				}
			}
		},
		
		fillFields : function() {
			var empId = $("#"+this.employeeIdInputFieldId).val();
			if(empId && empId!=""){
				$.fancybox.showLoading();
				var reqUri = "getEmployeeData.json?empId="+empId;
				if(this.isVisitor){
					reqUri+="&isVisitor=true";
				}
				$.getJSON(reqUri, function(data){
					EmployeeAutoFiller.completeFields(data);
					$.fancybox.hideLoading();
				});
			}
		}
}